<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IT服务知识库</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <style>
        .layui-side {
            width: 16%;
        }

        .layui-side-scroll {
            width: 100%;
        }

        .layui-nav-tree {
            width: 98%;
        }

        .last-a {
            padding-left: 25% !important;
        }

        .layui-nav-tree .layui-nav-bar {
            display: none;
            background-color: #f30a11 !important;
        }

        .layui-bg-black {
            background-color: #485484 !important;
        }

        .layui-nav {
            background-color: #485484;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #5775EF !important;
        }

        .layui-nav-itemed > .layui-nav-child {
            background-color: #485484 !important;
        }

        .second-a {
            padding-left: 17% !important;
            width: 75%;
        }

        .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this {
            background-color: #485484;
        }

        #ul_jl_tabs li img {
            margin-top: 0 !important;
            padding: 12px 0;
        }

        .zskml-li {
            padding: 20px;
        }

        .zskml {
            font-size: 22px;
            font-weight: bolder;
        }

        .layui-nav-tree .layui-this > a {
            background-color: #5775EF !important;
        }

        .layui-nav-tree .layui-this {
            background-color: #5775EF !important;
        }

        .column > div {
            padding-bottom: 11px;
        }

        .column ul li {
            line-height: 32px;
            /*padding: 2px 8px;*/
            /*margin: -2px 5px;*/
            margin-bottom: -2px;
            padding: 0 10px;
        }

        .column ul {
            position: absolute;
            bottom: 8px;
        }

        .tab_menu {
            width: 150px;
            line-height: 25px;
            background: #FFFFFF;
            position: absolute;
            box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 25%);
            font-size: 14px;
            text-align: center;
            padding: 0;
            z-index: 1000;
        }

        .tab_menu ul {
            width: 100%;
            line-height: 25px;
        }
    </style>
</head>

<body>
<!--头部-->
<header class="whitebg">
    <div class="clearfix">
        <a href="/main">
            <img src="${re.contextPath}/plugin/common/images/2@2x.png" class="logo fl" alt=""/>
        </a>
        <div class="mineData fr clearfix mt10">
            <#--            <img src="${re.contextPath}/plugin/common/images/29@2x.png" alt="" class="fl"/>-->
            <#if "${file}" !="${null}" && (file.xgtx) != "${null}">
                <img class="ml10" src="${file.xgtx}" alt="" id="mainimg7">
            <#else>
                <#if "${user}" !="${null}" && (user.personType) == "002">
                    <img class="layui-upload-img ml10" id="mainimg7" src="/plugin/common/images/zzlogo.jpg">
                <#else>
                    <img class="layui-upload-img ml10" id="mainimg7"
                         src="${re.contextPath}/plugin/common/images/29@2x.png">
                </#if>
            </#if>
            <nav class="fl ml10">
                <p class="fr18" style="margin-top: 17%;"><#assign currentUser = Session["currentPrincipal"]>
                    <#--<img src="${re.contextPath}/images/${currentUser.photo}" class="layui-nav-img">-->
                    ${currentUser.username}</p>
                <p class="gary"><a href="${re.contextPath}/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a>
                </p>
            </nav>
        </div>
    </div>
    <div class="column bluebg white clearfix" style="padding: 10px 2.5% 0">
        <div class="ft26 fl"><a href="/it/index" style="color: #FFFFFF;">IT服务知识库</a></div>
        <div class="tab_list" style="display: inline-block;width: 84.5%;overflow: hidden;padding-bottom: 10px;">
            <div id="lt-arrow"><img id="left" class="arrow" src="${re.contextPath}/plugin/common/images/lt-arrow.png">
            </div>
            <ul id="ul_jl_tabs" class="ft14 clearfix fl ml50" style="display: flex;margin-left: 0;left:43px;"></ul>
            <div id="rt-arrow"><img id="right" class="arrow" src="${re.contextPath}/plugin/common/images/rt-arrow.png">
            </div>
        </div>
    </div>
    <div class="tab_menu" id="tab_menu">
        <ul>
            <li class="list closeother">关闭其他标签</li>
            <li class="list closeall">关闭所有标签</li>
        </ul>
    </div>
</header>
<!--容器-->
<div class="container clearfix">
    <!--占位-->
    <div class="headerHightAdd"></div>
    <!--左侧菜单栏-->

    <div class="layui-side layui-bg-black" style="top:123px;margin-top: 16px;">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <li class="zskml-li">
                    <span class="ft20 zskml">知识库目录</span>
                    <div class="layui-col-md-offset3 w80p fr">
                        <img src="/plugin/common/images/86@2x.png" alt="" class="cursor"
                             style="height:13px;margin-left:14px;padding-bottom:2px"
                             onclick="_itkl.content.leftCloseAll()"/>
                        <span class="ft10" style="padding-top:2px">收起</span>
                        <img src="/plugin/common/images/87@2x.png" alt="" class="cursor"
                             style="height:13px;margin-left:6px;padding-bottom:2px"
                             onclick="_itkl.content.leftOpenAll()"/>
                        <span id="openAllBtn" class="ft10" style="padding-top:2px">展开</span>
                    </div>

                </li>
                <#list first as firstDic>
                    <li class="layui-nav-item oneLevelLi">
                    <a class="first-a" href="javascript:;" fileid="${firstDic.id}"
                       onclick="_itkl.content.jumpTo('${firstDic.id}','1','${firstDic.fileName}')">${firstDic.fileName}</a>
                    <#if (firstDic.childs?? && firstDic.childs?size gt 0)>
                        <dl class="layui-nav-child">

                        <#list firstDic.childs as secondDic>
                            <li class="layui-nav-item twoLevelLi">
                                <a class="second-a" href="javascript:;" fileid="${secondDic.id}"
                                   onclick="_itkl.content.jumpTo('${secondDic.id}','1','${secondDic.fileName}')">${secondDic.fileName}</a>
                                <#if (secondDic.childs?? && secondDic.childs?size gt 0)>
                                    <dl class="layui-nav-child">
                                        <#list secondDic.childs as thirdDic>
                                            <dd class><a href="javascript:;" class="last-a" fileid="${thirdDic.id}"
                                                         onclick="_itkl.content.jumpTo('${thirdDic.id}','1','${thirdDic.fileName}')">${thirdDic.fileName}</a>
                                            </dd>
                                        </#list>
                                    </dl>
                                </#if>
                            </li>
                        </#list>
                        </dl>
                    </#if>
                    </li>
                </#list>
            </ul>
        </div>
    </div>


    <!--右侧内容-->
    <div id="ul_jl_tabs_content" class="Right fr fixRight"
         style="overflow-y: hidden;left: 14%;height: calc(100vh - 123px)"></div>
</div>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/itkl.js"></script>
<script>
    document.oncontextmenu = function () {
        return false;
    }
    document.onmousedown = function (event) {
        // console.log(event)
        if (event.which === 1) {
            // console.log('yes')
            // $('.tab_menu').hide()
        }
    }
    $('.tab_menu').hide()
</script>
<script>
    var element;
    $(function () {

        window.parent._showtab('4d3d0208d59f47ac87580c014c0a5da3', '首页', '/it/homePage', function (iframe) {
            //点开首页的话,刷新最新,最热,和收藏夹:
            if (iframe) {
                $(iframe)[0].contentWindow.flushPage();
            }
        });
        $(".Right").css({
            left: $(".Left").width() + 'px',
            top: $(".headerHightAdd").height() + 'px',
            // height: ($(document).height() - $(".headerHightAdd").height()) + 'px'
        });

        //取消右键的系统默认弹窗
        document.oncontextmenu = function (e) {
            return false
            //或者 e.preventDefault()
        }
        document.onmouseup = function (e) {
            //只有知识库管理员才能打开权限设置:
            <@shiro.hasRole name="zsk">
            if (e.button == 2) {
                if ($(e.target).attr('fileid')) {
                    _itkl.permission.openPermissionSetPage($(e.target).attr('fileid'));
                }
                // var aa = $(e.path[0]);
                // if(aa && aa.attr('fileid'))
                // _itkl.permission.openPermissionSetPage(aa.attr('fileid'));
            }
            </@shiro.hasRole>
        }

        $(document).parents('iframe').attr('scrolling', 'no');

        layui.use(['element'], function () {
            element = layui.element;
            element.render('nav');
        })

        $('.first-a').on('click', function () {
            $('.layui-this').removeClass('layui-this');
            $(this).addClass('layui-this');
        })

        $('.second-a').on('click', function () {
            $('.layui-this').removeClass('layui-this');
            $(this).addClass('layui-this');
        })


    })

    function flushLeftTree() {
        element.render('nav');
    }

    //增加一个
    function addLeft(dicId) {
        var newDicId = localStorage.getItem("newitdicfileid");
        var newDicName = localStorage.getItem("newitdicfilename");
        //查找第一级:
        var firstDica = $('.first-a[fileid=' + dicId + ']');
        if (firstDica && firstDica.length > 0) {
            //如果有第一级,添加到它的下面:
            firstDica.next().prepend('<li class="layui-nav-item twoLevelLi">' +
                '<a class="second-a" href="javascript:;" fileid="' + newDicId + '" onclick="_itkl.content.jumpTo(\'' + newDicId + '\',\'1\',\'' + newDicName + '\')">' + newDicName + '</a>' +
                '<dl class="layui-nav-child">' +
                '</dl>' +
                '</li>');
            element.render('nav');
        } else {
            //如果一级没有,查找一下二级
            var secondDica = $('.second-a[fileid=' + dicId + ']');
            if (secondDica && secondDica.length > 0) {
                //如果有第一级,添加到它的下面:
                secondDica.next().prepend('<dd class><a href="javascript:;" class="last-a" fileid="' + newDicId + '" onclick="_itkl.content.jumpTo(\'' + newDicId + '\',\'1\',\'' + newDicName + '\')">' + newDicName + '</a></dd>');
            }
            element.render('nav');
        }
        localStorage.removeItem("newitdicfileid");
        localStorage.removeItem("newitdicfilename");
    }

    //删除一个
    function delOneDic(dicId) {
        if (dicId) {
            //查找第一级:
            var firstDica = $('.first-a[fileid=' + dicId + ']');
            if (firstDica && firstDica.length > 0) {
                //如果有,删掉:
                firstDica.parents('.oneLevelLi').remove();
            } else {
                //如果没有,看第二级:
                var secondDica = $('.second-a[fileid=' + dicId + ']');
                if (secondDica && secondDica.length > 0) {
                    //如果有,删掉
                    secondDica.parents('.twoLevelLi').remove();
                } else {
                    //看第三级:
                    var thirdDica = $('.last-a[fileid=' + dicId + ']');
                    if (thirdDica && thirdDica.length > 0) {
                        thirdDica.parent().remove();
                    }
                }
            }
        }
    }

    $(document).ready(function () {
        var lt = $("#lt-arrow").offset().left;
        var ltw = $("#lt-arrow").width();
        var rt = $("#rt-arrow").offset().left;
        var distances = rt - (lt + ltw);
        $("#lt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ltul = _apst.offset().left
            var ult = lt + ltw - 2
            if (ulwidth > distances && ltul < ult) {
                _apst.css({left: (_apst.position().left + 40) + "px"});
            }
        })
        $("#rt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ulleft = _apst.offset().left
            var widthadd = ulleft + ulwidth
            if (ulwidth > distances && widthadd > rt) {
                _apst.css({left: (_apst.position().left - 40) + "px"});
            }
        })
    })


    var tabid;

    $('#ul_jl_tabs').on("mousemove", 'li', function (event) {
        var that = $(this);
        if (event.offsetX > that.width() - 5 || event.offsetX < 5 || event.offsetY < 5 || event.offsetY > that.height() - 5) {
            $('.tab_menu').hide()
        }
    })

    $('#ul_jl_tabs').on("mousedown", 'li', function (event) {
        var that = $(this);
        tabid = that.attr('mid')
        console.log(event);
        if (event.which === 3) {
            $('.tab_menu').css({
                'top': event.clientY + 'px',
                'left': event.clientX + 'px',
            })
            _showTabByMid(tabid)
            $('.tab_menu').show()
        } else {
            $('.tab_menu').hide()
        }
    })

    $('#tab_menu').on("click", "ul .closeother", function () {
        console.log('other');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            console.log(id)
            if (id != tabid) {
                _delTab(id)
            }
        }
        $('.tab_menu').hide()
    })

    $('#tab_menu').on("click", "ul .closeall", function () {
        console.log('all');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            _delTab(id)
        }
        $('.tab_menu').hide()
    })


</script>
</body>

</html>
